<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="../CssFrame/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="../CssFrame/bootstrap.css">

<script src="../Jquery/Jquery-3.3.1.js" type="text/javascript"></script>

<meta charset="UTF-8">

<style type="text/css">
#login-box {
	margin-left: 33%;
	padding: 35px;
	border-radius: 15px;
	background: #56666B;
	color: #fff;
}
</style>

<title>宿管员登录</title>
</head>
<body>
	<div style="text-align: center;">
		<h2>学生宿舍管理系统</h2>
		<div class="row" style="margin-top: 40px;">

			<div class="col-md-4" id="login-box">
				<form id="login_form" class="form-horizontal" role="form">
					<h4>宿管员登录</h4>
					<br>
					<div class="form-group">
						<div class="col-sm-9">
							<input type="text" name="idCard" placeholder="请输入身份证号码" class="form-control" style="width: 302px">
						</div>
					</div>
					<!--  -->
					<div class="form-group">
						<div class="col-sm-9">
							<input type="password" name="password" placeholder="请输入密码" class="form-control" style="width: 302px">
						</div>
					</div>
					<!--  -->
					<div>
						<p style="font-size: 12px;">点击下图可刷新验证码</p>
						<canvas id="canvas" style="margin-top: 0%; background-color: aquamarine;">
                </canvas>
						<br>
						<p>
							<input type="text" name="validateCode" placeholder="输入图中的验证码" maxlength="5" height="50px"
								style="margin-top: 20px; color: #201e03;" id="validateCode">
						</p>
					</div>
					<br>
					<!--  -->

					<div class="form-group" style="margin-right: 15px;">
						<div class="col-sm-offset-2 col-sm-10">
							<input type="button" value="登录" id="sub_login" class="btn btn-default btn-info">
							<div>
								<br>
								<!--  -->
								<div>
									<a href="Registration.html" style="color: white;">注册账号</a>
								</div>
							</div>
							<!--  -->
				</form>

			</div>
		</div>
	</div>
	</div>
</body>
<script type="text/javascript">
	$('#sub_login').click(function() {
		/*  */
		var ban = verifyValidateCode();
		if (ban == false) {
			console.log(ban);
			return;
		}

		var url = "/dormitory/HouseParents/logining";
		var data = $("#login_form").serialize();
		$.ajax({
			"url" : url,
			"data" : data,
			"type" : "POST",
			"dataType" : "json",
			"success" : function(json) {
				if (json.state == 200) {
					alert("登录成功");
					location.href = "DormitoryManageSystem.html";
				} else {
					alert(json.message);
				}
			}
		});
	});

	/**
	 * 验证码生成并校验
	 */
	var show_num = new Array();
	$(function() {
		//var show_num = new Array();
		draw(show_num);

		console.log('validate code:' + show_num);

		$('#canvas').on('click', function() {
			draw(show_num);
		})

		function draw(show_num) {
			var canvas_width = $('#canvas').width();
			var canvas_height = $('#canvas').height();

			var canvas = document.getElementById('canvas');

			var context = canvas.getContext("2d");// 获取canvas画图的环境

			canvas.width = canvas_width;
			canvas.height = canvas_height;

			var srcCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z"
					+ ",a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z" + ",1,2,3,4,5,6,7,8,9,0";

			var aloneCode = srcCode.split(',');
			// console.log('aloneCode- '+aloneCode);
			var aloneCodeLen = aloneCode.length;

			for (var index = 0; index <= 4; index++) {
				var j = Math.floor(Math.random() * aloneCodeLen);// 得到随机的索引
				var txt = aloneCode[j];
				// console.log("txt- "+txt);

				show_num[index] = txt;

				//产生0~30° random radian
				var deg = Math.random() * 30 * Math.PI / 180;
				var x = 10 + index * 36;// 字符在canvas上的x坐标
				var y = 20 + Math.random() * 8;// 字符在canvas上的y坐标

				context.font = "bold 33px 微软雅黑";
				context.translate(x + 5, y + 5);
				context.rotate(deg);
				context.fillStyle = randomColor();
				context.fillText(txt, 0, 0);
				context.translate(-x + 10 * 1.5, -y + 10 * 2.5);
				context.rotate(-deg);
			}

			// 验证码上显示线条
			for (var index = 0; index <= 5; index++) {
				context.strokeStyle = randomColor(); // stroke 一击,轻触,抚摸
				context.beginPath();
				context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
				context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
				context.stroke();
			}

			// 验证码上显示小点
			for (var index = 0; index < 60; index++) {
				context.strokeStyle = randomColor();
				context.beginPath();
				var x = Math.random() * canvas_width;
				var y = Math.random() * canvas_height;

				context.moveTo(x, y);
				context.lineTo(x + 1, y + 1);
				context.stroke();
			}

			// 得到随机的颜色值
			function randomColor() {
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);

				return 'rgb(' + r + ',' + g + ',' + b + ',' + ')';
			}

		}

		// 检视变量类型
		console.log('typeof(show_num): ' + typeof (show_num + ''));

	});

	/* 校验验证码 */
	function verifyValidateCode() {
		var v = $('#validateCode').val();

		if (v == '' || v == null) {
			alert('禁止验证码为空');
			return;
		}
		v = v.toLowerCase();

		var vcStr = show_num + '';
		vcStr = vcStr.toLowerCase();
		vcStr = vcStr.replace(/,/g, '');// 去除字符串中的所有逗号

		console.log('typeof(vcStr):' + typeof (vcStr))
		console.log('commitsForm vcStr: ' + vcStr);
		console.log(v === vcStr);

		if (v === vcStr) {
			console.log('correspond');
			return true;
		} else {
			alert('Not correspond');
			return false;
		}
		/*  */
	}
</script>
</html>